<template>
  <div class="mine-header">
    <div class="header fixed" :style="{'background-color':bgColor ? bgColor : 'transparent'}">
      <div v-if="showStatusbar" class="statusbar" :style="{'height':statusBarHeight+'px'}" />
      <div class="content" :class="{'white':!fontBlack}">
        <div class="h-slot">
          <div v-if="arrow" class="h-icon" @click.stop="clickHandle">
            <svg-icon icon-class="xiangzuo" />
          </div>
          <slot>
            <div class="title">{{ title }}</div>
          </slot>
        </div>
        <MoreClose :black="fontBlack" />
      </div>
    </div>
    <div v-if="showBottomPlaceholder" class="placeholder" :style="{'height':(statusBarHeight + 44)+'px'}" />
  </div>
</template>
<script>
import MoreClose from '@/components/MoreClose'
import { mapGetters } from 'vuex'
export default {
  name: 'MineHeader',
  components: {
    MoreClose
  },
  props: {
    arrow: {
      type: Boolean,
      defalut: true
    },
    title: {
      type: String,
      default: ''
    },
    showStatusbar: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: String,
      default: '#FFFFFF'
    },
    fontBlack: {
      type: Boolean,
      default: true
    },
    backFunc: {
      type: Function,
      default: null
    },
    showPlaceholder: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['statusBarHeight']),
    showBottomPlaceholder() {
      if (this.showStatusbar) {
        return !!this.showPlaceholder
      } else {
        return false
      }
    }
  },
  watch: {

  },
  methods: {
    clickHandle() {
      if (this.backFunc && this.backFunc instanceof Function) {
        this.backFunc()
        return
      }
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.fixed{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.header{
  background-color: #fff;
  .content{
    padding: 0 12PX;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44PX;
    .h-slot{
      flex: 1 1 auto;
      padding-right: 20PX;
      display: flex;
      align-items: center;
      .h-icon{
        margin-left: -5PX;
        flex: 0 0 24PX;
        font-size: 24PX;
        color: #000;
        line-height: 1;
        .svg-icon{
          font-size: 24PX;
        }
      }
      .title{
        padding: 0 10PX 0 5PX;
        font-weight: bold;
        font-size: 16PX;
      }
    }
    &.white{
      color: #fff;
      .h-icon{
        color: #fff;
      }
    }
  }
  /deep/ .more-close{
    // background: transparent;
    .sep{
      background: rgba(0, 0, 0, 0.08) !important;
    }
  }
}
</style>
<style lang="less">
  .mine-container{
    padding-top: 44PX;
  }
</style>
